<template>
<vs-modal :show.sync="show" effect="fade" width="800px">
  <div class="modal-header" slot="modal-header">
    <h4 class="modal-title">{{$t('common.params')}}</h4>
  </div>  
  <div class="modal-body" slot="modal-body">
    <form class="form-horizontal">
      <div class="form-group">
        <label class="col-sm-3 control-label">{{$t('open.params.layout')}}</label>
        <div class="col-sm-8">
          <select class="form-control" v-model="layout" @change="onChange">
            <option v-for="option in layoutOptions" :value="option.field">{{option.name}}</option>
          </select>
        </div>
      </div>  
      <div class="form-group">
        <label class="col-sm-3 control-label">{{$t('open.params.playAudio')}}</label>
        <div class="col-sm-8">
          <vs-select :value.sync="playAudioWindows" 
            :options="windowOptions" 
            :placeholder="$t('error.nothingSelected')"
            :limit="3"
            multiple></vs-select>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-3 control-label">{{$t('open.params.mode')}}</label>
        <div class="col-sm-8">
          <div class="checkbox">
            <label>
              <input type="checkbox" v-model="dup" @change="onChange"> {{$t('open.params.dup')}}
            </label>
          </div>
        </div>
      </div> 
      <div class="form-group">
        <label class="col-sm-3 control-label">{{$t('open.params.preview')}}</label>
        <div class="col-sm-8" id="preview">
        </div>
      </div>          
    </form>
  </div>
  <div class="modal-footer" slot="modal-footer">
    <button type="button" class="btn btn-default" @click.prevent="onQuit">{{$t('common.quit')}}</button>
    <button type="button" class="btn btn-primary" @click.prevent="onOpenWindow">{{$t('open.title')}}</button>
  </div>    
</vs-modal>  
</template>

<script>
import _ from 'lodash'
import ebus from 'libs/ebus.js'
import toast from 'libs/toast.js'
import msgbox from 'libs/msgbox.js'
import locales from '../locales/lcdWindow.js'
import {List} from '../configs/buildInLayout.js'
import {LcdPreview} from 'libs/canvas.js'
import * as actions from 'share/server/vuex/actions/multimedia.js'
import {setLcdWindows, getMultiScreenOfLcd} from 'share/server/utils.js'

export default {
  locales,
  vuex: {
    getters: {
      streams: (state) => state.streamsrc.list,
    },
    actions
  },
  data () {
    return {
      show: false,
      layout: 'fullscreen',
      dup: false,
      layoutOptions: new List(this),
      windows: [],
      playAudioWindows: []
    }
  },
  computed: {
    windowOptions: function() {
      return _.map(this.windows, (item) => {
        return {
          value: `${item.windowId}`, 
          label: `${item.windowId}-${item.srcName}`
        }
      })
    }
  },
  watch: {
    'playAudioWindows': function(newVal, oldVal) {
      let playAudioWindows = newVal
      _.forEach(this.windows, function(item) {
        let windowId = `${item.windowId}`
        if (playAudioWindows.includes(windowId)) {
          item.playAudio = 1
        } else {
          item.playAudio = 0
        }
      })
      this.drawLayout()
    }
  },
  methods: {
    onChange () {
      this.playAudioWindows.splice(0, this.playAudioWindows.length)
      this.makeOpenWindow()
      this.drawLayout()
    },
    onQuit () {
      this.show = false
    },
    makeOpenWindow () {
      let dup = this.dup
      let lcdInfo = this.lcdInfo
      var streams = _.filter(this.streams, {_checked: true})
      var layout = _.find(this.layoutOptions, {field: this.layout})

      this.windows.splice(0, this.windows.length)
      _.forEach(layout.windowList, function(item, index) {
        if (!dup && index >= streams.length) {
          return
        }
        var streamIndex = index % streams.length
        var stream = streams[streamIndex]
        var coordinate = item.coordinate
        this.windows.splice(this.windows.length, 0, {
          windowId: index + 1, 
          srcTopoId: stream.topoId,
          srcPortName: stream.portName,
          srcName: stream.name,
          playAudio: 0,
          layer: index + 1, 
          coordinate: {
            topHoriz: coordinate.topHoriz * lcdInfo.multiScreenX,
            topVerti: coordinate.topVerti * lcdInfo.multiScreenY,
            bottomHoriz: coordinate.bottomHoriz * lcdInfo.multiScreenX,
            bottomVerti: coordinate.bottomVerti * lcdInfo.multiScreenY,
          }
        })  
      }.bind(this))      
    },
    onOpenWindow () {
      let lcdInfo = this.lcdInfo

      setLcdWindows(lcdInfo.topoId, 
          lcdInfo.multiScreenX, 
          lcdInfo.multiScreenY, this.windows).then(function(res) {
        if (res && res.data && res.data.code === 0) {
          toast.s(this, this.$t('common.success'), '')
        } else {
          toast.code(this, res.data)
        }
      }.bind(this))
      this.show = false
    },
    drawLayout () {
      let lcdInfo = this.lcdInfo
      let realWidth = 12 * lcdInfo.multiScreenX * 16
      let realHeight = 12 * lcdInfo.multiScreenY * 9
      let scale = 500 / realWidth
      var previewCfg = {
        width: 500,
        height: realHeight * scale,
        scale: scale
      }
      this.preview.init('preview', previewCfg)     
      this.preview.updateBg({
        color: {
          hex: '#666'
        }
      }) 
      this.preview.updateWindows(this.windows, {
        xScale: scale * 16,
        yScale: scale * 9
      })
    },
    onShow (lcdInfo) {
      this.lcdInfo = lcdInfo
      this.onChange()
      this.show = true
    }
  },
  ready () {
    this.preview = new LcdPreview()
    ebus.on('show-open-window-detail', this.onShow)
  }
}
</script>

<style>
</style>